
import React from 'react';
import ProForm, {
    ModalForm,
    ProFormText
} from '@ant-design/pro-form';
import type { ModalProps } from 'antd';
import { useIntl } from 'umi';
import { Md5 } from 'ts-md5';
import type { Store } from 'antd/lib/form/interface';

interface ChangePasswordProps {
    mode?: 'default' | 'security';
}

const ChangePassword: React.FC<ChangePasswordProps> = (props) => {
    const { mode } = props;

    /**
     * @en-US International configuration
     * @zh-CN 国际化配置
     * */
    const intl = useIntl();

    const handlePasswordValueTransform = (value: any, field: string, object: any) => {
        object[field] = Md5.hashStr(value);
        return object;
    }

    return (<>
        {mode && mode == 'security' && <ProFormText.Password
            label={intl.formatMessage({
                id: 'pages.user.passwordchange.old',
                defaultMessage: '旧密码'
            })}
            name="oldPassword"
            placeholder={intl.formatMessage({
                id: 'pages.user.passwordchange.old.placeholder',
                defaultMessage: '请输入旧密码'
            })}
            rules={[
                {
                    required: true,
                    message: intl.formatMessage({
                        id: 'pages.user.detail.input.password.rules',
                        defaultMessage: '密码长度为6~22位字符，且只能是字母与数字组成'
                    })
                },
            ]}
            transform={handlePasswordValueTransform}
        />}
        <ProFormText.Password
            label={intl.formatMessage({
                id: 'pages.user.passwordchange.new',
                defaultMessage: '新密码'
            })}
            name="newPassword"
            placeholder={intl.formatMessage({
                id: 'pages.user.passwordchange.new.placeholder',
                defaultMessage: '请输入新密码'
            })}
            rules={[
                {
                    required: true,
                    pattern: /^[a-zA-Z0-9]{6,22}$/,
                    message: intl.formatMessage({
                        id: 'pages.user.detail.input.password.rules',
                        defaultMessage: '密码长度为6~22位字符，且只能是字母与数字组成'
                    })
                },
            ]}
            transform={handlePasswordValueTransform}
        />
        <ProFormText.Password
            label={intl.formatMessage({
                id: 'pages.user.passwordchange.confirm',
                defaultMessage: '确认密码'
            })}
            name="confirm-password"
            dependencies={['newPassword']}
            placeholder={intl.formatMessage({
                id: 'pages.user.detail.input.confirmpassword.placeholder',
                defaultMessage: '请再次输入登录密码进行确认'
            })}
            rules={[
                ({ getFieldValue }) => ({
                    validator(_, value) {
                        if (getFieldValue('newPassword') === value) {
                            return Promise.resolve();
                        }
                        return Promise.reject(new Error(intl.formatMessage({
                            id: 'pages.user.detail.input.confirmpassword.rules',
                            defaultMessage: '两次输入的密码不一致,请检查'
                        })));
                    },
                }),
            ]}
        />
    </>);
}

interface ChangePasswordFormProps extends ChangePasswordProps {
    initialValues?: Store;
    onSubmit: (values: any) => Promise<boolean | void>;
}

interface PopupChangePasswordProps extends ChangePasswordFormProps {
    modalVisible?: boolean;
    onVisibleChange: (visit: boolean) => void;
    modalProps?: Omit<ModalProps, 'visible'>;
}

export const PopupChangePassword: React.FC<PopupChangePasswordProps> = (props) => {
    const { mode,initialValues, modalVisible, onVisibleChange, modalProps, onSubmit, children } = props;

    /**
     * @en-US International configuration
     * @zh-CN 国际化配置
     * */
    const intl = useIntl();

    return (
        <ModalForm
            title={intl.formatMessage({
                id: 'pages.user.passwordchange',
                defaultMessage: '修改密码'
            })}
            initialValues={initialValues}
            visible={modalVisible}
            onVisibleChange={onVisibleChange}
            modalProps={{
                destroyOnClose: true,
                width: 400,
                maskClosable: false,
                ...modalProps
            }}
            onFinish={onSubmit}
        >
            <ChangePassword mode={mode} />
            {children}
        </ModalForm>
    );
}

export const ChangePasswordView: React.FC<ChangePasswordFormProps> = (props) => {
    const { mode,initialValues, onSubmit, children } = props;
    return (
        <ProForm initialValues={initialValues} onFinish={onSubmit}>
            <ChangePassword mode={mode} />
            {children}
        </ProForm>
    )
}